<template>
  <el-dropdown>
    <span class="el-dropdown-link" style="display: flex; align-items: center;">
      <el-icon :size="32"><User /></el-icon>
      <span style="margin-left: 8px;">{{ user.username }}</span>
      <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <template #dropdown :default-active="activeMenu">
      <el-dropdown-menu>
        <el-dropdown-item @click="goProfile" index="/profile">个人设置</el-dropdown-item>
        <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { useRouter } from 'vue-router'
import UserService from '@/services/UserService.js';

const router = useRouter()

defineProps(['user'])
defineEmits(['logout', 'settings'])

function goProfile() {
  router.push('/profile')
}
function logout() {
  UserService.logout()
  router.push('/login')
}
</script>